<!-- 首页 -->
<template>
  <div class="w-full h-full flex flex-col">
    <div class="text-center">总览1</div>
    <div ref="chartBox" class="flex-1"></div>
  </div>
</template>

<script setup name="overview1" lang="ts">
import { onMounted, onUnmounted, reactive, ref } from 'vue'

const { $echarts } = window
const config = reactive({
  data: [],
})

// chart图表
const chartBox = ref()
const chartConfig = reactive({
  chart: null,
  chartBox,
  loopShow: true,
  option: {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: 'rgba(204, 204, 204, 0.4)',
          type: 'solid',
          width: 50,
        },
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '6%',
      top: '10%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: ['2019', '2020', '2021', '2022', '2023'],
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    yAxis: [{ show: true }],
    series: [
      {
        type: 'bar',
        barWidth: 50,
        data: [160.78, 199.23, 168.25, 145.36, 120.43],
        itemStyle: {
          color: () => {
            return new $echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                { offset: 0, color: 'rgba(142, 102, 44, .9)' },
                { offset: 1, color: 'rgba(142, 102, 44, 0.1)' },
              ],
              false,
            )
          },
        },
        label: {
          show: false,
          position: 'top',
          fontSize: 16,
          color: '#ffffff',
          textShadowColor: 'rgba(10, 248, 255, 1)',
          fontWeight: 'bold',
        },
        emphasis: {
          label: {
            show: true,
          },
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(0, 213, 255, 0.9)',
                },
                {
                  offset: 1,
                  color: 'rgba(0, 213, 255, 0)',
                },
              ],
            },
          },
        },
      },
    ],
  },
})
onMounted(() => {
  chartConfig.chart = $echarts.initChart(chartConfig)
})
onUnmounted(() => {
  $echarts.removeChart(chartConfig)
})
</script>

<style lang="scss" scoped></style>
